/**
 *
 * @param {String} newValue:属性的新值
 * @param {String} attrsName:要改变属性名称
 */
export default function aimAttrsChange(state, { newValue, attrsName, that }) {
  let oldDom; //旧dom节点数据，用于存储栈
  if (
    newValue == null ||
    newValue == undefined ||
    Object.keys(state.aimDom).length == 0
  )
    return;
  // if (state.judgeColorDom) return;

  oldDom = JSON.parse(JSON.stringify(state.aimDom));

  console.log(newValue, attrsName);

  if (!state.aimDom.style) state.aimDom.style = {};
  if (
    [
      "width",
      "height",
      "borderWidth",
      "borderRadius",
      "fontSize",
      "borderRadius",
    ].includes(attrsName)
  ) {
    state.aimAttrs[attrsName] = newValue;
    that.$set(state.aimDom.style, attrsName, newValue + "px");
  } else if (
    [
      "marginTop",
      "marginBottom",
      "marginRight",
      "marginLeft",
      "paddingTop",
      "paddingBottom",
      "paddingRight",
      "paddingLeft",
    ].includes(attrsName)
  ) {
    let MorP = attrsName.startsWith("m") ? "margin" : "padding"; //判断是外边距还是内边距
    let bs = state.aimAttrs[MorP];
    let top = attrsName == `${MorP}Top` ? newValue : bs.top;
    let right = attrsName == `${MorP}Right` ? newValue : bs.right;
    let bottom = attrsName == `${MorP}Bottom` ? newValue : bs.bottom;
    let left = attrsName == `${MorP}Left` ? newValue : bs.left;
    state.aimAttrs[MorP] = {
      top,
      right,
      bottom,
      left,
    };
    that.$set(
      state.aimDom.style,
      MorP,
      `${top}px ${right}px ${bottom}px ${left}px`
    );
  } else if (
    [
      "backgroundColor",
      "borderColor",
      "color",
      "fontWeight",
      "opacity",
      "position",
      "justifyContent",
    ].includes(attrsName)
  ) {
    state.aimAttrs[attrsName] = newValue;
    that.$set(state.aimDom.style, attrsName, newValue);
  } else if (
    [
      "boxShadow-color",
      "boxShadow-hShadow",
      "boxShadow-vShadow",
      "boxShadow-blur",
      "boxShadow-spread",
    ].includes(attrsName)
  ) {
    let bs = state.aimAttrs.boxShadow;
    let hShadow = attrsName == "boxShadow-hShadow" ? newValue : bs.hShadow;
    let vShadow = attrsName == "boxShadow-vShadow" ? newValue : bs.vShadow;
    let blur = attrsName == "boxShadow-blur" ? newValue : bs.blur;
    let spread = attrsName == "boxShadow-spread" ? newValue : bs.spread;
    let color = attrsName == "boxShadow-color" ? newValue : bs.color;
    state.aimAttrs.boxShadow = {
      hShadow,
      vShadow,
      blur,
      spread,
      color,
    };
    that.$set(
      state.aimDom.style,
      "boxShadow",
      `${hShadow}px ${vShadow}px ${blur}px ${spread}px ${color}`
    );
  } else if (attrsName == "context") {
    state.aimAttrs.context = newValue;
    state.aimDom.context.value = newValue;
  } else if (attrsName == "goto") {
    state.aimAttrs.goto = { type: newValue.type, value: newValue.value };
    that.$set(state.aimDom, "goto", {
      type: newValue.type,
      value: newValue.value,
    });
  } else if (attrsName == "colWidth") {
    that.$set(state.aimAttrs.colWidth, newValue[0], newValue[1]);
    state.aimDom.children[newValue[0]].style.width = newValue[1] + "%";
  } else if (attrsName == "seniorBoxSize") {
    let size = [];

    (function changeValue(arr) {
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        if (element.attrs["data-type"] == "seniorBoxItem") {
          if (
            element.attrs.class[element.attrs.class.length - 1] ==
            newValue.index
          ) {
            if (element.style[newValue.type]) {
              element.style[newValue.type] = newValue.value + "%";
              return false;
            } else {
              return true;
            }
          }
        } else {
          changeValue(element.children) &&
            (element.style[newValue.type] = newValue.value + "%");
        }
      }
    })(state.aimDom.children);

    (function searchWidth(arr, fa) {
      arr.forEach((item) => {
        if (item.attrs["data-type"] == "seniorBoxItem") {
          if (item.style.width) {
            size[item.attrs.class[item.attrs.class.length - 1]] = {
              height: fa,
              width: item.style.width.slice(0, -1),
            };
          } else {
            size[item.attrs.class[item.attrs.class.length - 1]] = {
              width: fa,
              height: item.style.height.slice(0, -1),
            };
          }
        } else {
          searchWidth(
            item.children,
            item.style.width
              ? item.style.width.slice(0, -1)
              : item.style.height.slice(0, -1)
          );
        }
      });
    })(state.aimDom.children, "100");
    state.aimAttrs.seniorBoxSize.size = size;
  } else if (attrsName == "sort") {
    let tree = state.page.tree[that.pageName];
    if (newValue.type == "up") {
      let obj = tree[newValue.value];
      tree[newValue.value] = tree[newValue.value - 1];
      that.$set(tree, newValue.value - 1, obj);
      state.aimAttrs.sort = newValue.value - 1;
    } else {
      let obj = tree[newValue.value];
      tree[newValue.value] = tree[newValue.value + 1];
      that.$set(tree, newValue.value + 1, obj);
      state.aimAttrs.sort = newValue.value + 1;
    }

    state.domStackNum += 1;
    state.domStack.splice(state.domStackNum);
    state.domStack.push({
      type: "sortChange",
      pageName: that.pageName,
      path: state.aimPath,
      data: [newValue.value, newValue.type],
    });
    return;
  } else if (attrsName == "changeNavMenuList") {
    let tree = state.aimDom.children;
    let numChange = newValue[2] == "up" ? newValue[1] - 1 : newValue[1] + 1;

    if (newValue[2] == "delete") {
      //删除
      that.$delete(tree, [newValue[1]]);

      if (newValue[0] == "navMenu") {
        that.$delete(state.aimAttrs.navMenuList.value, [newValue[1]]);
      } else {
        that.$delete(state.aimAttrs.navMenuList.value, [newValue[1]]);
      }
    } else {
      let obj = tree[newValue[1]];
      tree[newValue[1]] = tree[numChange];
      that.$set(tree, numChange, obj);

      //由于导航菜单作用下标为标识，不需要改变aimAttrs
      if (newValue[0] == "navMenuSub") {
        obj = state.aimAttrs.navMenuList.value[newValue[1]];
        state.aimAttrs.navMenuList.value[newValue[1]] =
          state.aimAttrs.navMenuList.value[numChange];
        that.$set(state.aimAttrs.navMenuList.value, numChange, obj);
      }
    }
  } else if (attrsName == "addNavMenuList") {
    let tree = state.aimDom.children;
    let data;

    if (newValue == "1") {
      data = {
        tagName: "el-submenu",
        attrs: {
          "data-type": "navMenuSub",
          index: new Date().getTime().toString(),
          class: `el-submenu navMenuSub${new Date().getTime()}`,
        },
        style: {
          width: "150px",
          "text-align": "center",
          "font-size": "16px",
          float: "none",
        },
        children: [
          {
            tagName: "template",
            slot: "title",
            attrs: {
              "data-type": "navMenuSubText",
              class: `el-submenu__title navMenuSubText${new Date().getTime()}`,
            },
            context: { type: "string", value: "下拉菜单" },
          },
          {
            tagName: "el-menu-item",
            attrs: {
              "data-type": "navMenuSubItem",
              index: `${new Date().getTime()}-1`,
              class: `el-menu-item navMenuItem${new Date().getTime()}`,
            },
            context: { type: "string", value: "选项1" },
          },
        ],
      };
    } else if (newValue == "2") {
      data = {
        tagName: "el-menu-item",
        attrs: {
          "data-type": "navMenuItem",
          index: new Date().getTime().toString(),
          class: `el-menu-item navMenuItem${new Date().getTime()}`,
        },
        style: {
          width: "150px",
          "text-align": "center",
          "font-size": "16px",
          float: "none",
        },
        context: { type: "string", value: "新选项" },
      };
    } else if (newValue == "navMenuSub") {
      data = {
        tagName: "el-menu-item",
        attrs: {
          "data-type": "navMenuSubItem",
          index: new Date().getTime().toString(),
          class: `el-menu-item navMenuItem${new Date().getTime().toString()}`,
        },
        context: { type: "string", value: "新选项" },
      };
    }

    that.$set(tree, tree.length, data);
    that.$set(
      state.aimAttrs.navMenuList.value,
      state.aimAttrs.navMenuList.value.length,
      newValue == "navMenuSub" ? "新选项" : data.attrs.class
    );
  } else if (attrsName == "changeNavMenuSub") {
    state.aimDom.children[newValue[0]].context.value = newValue[1];
    state.aimAttrs.navMenuList.value[newValue[0]] = newValue[1];
  } else if (attrsName == "carousel") {
    if (newValue.type == "height") {
      state.aimDom.attrs.height = newValue.value + "px";
    } else if (newValue.type == "type") {
      that.$set(state.aimDom.attrs, newValue.type, newValue.value);
    } else if (newValue.type == "imgUrl") {
      that.$set(
        state.aimDom.children[newValue.index].children[0].attrs,
        "src",
        newValue.value.blob
      );
      that.$set(
        state.aimAttrs.carousel.imgList,
        newValue.index,
        newValue.value.blob
      );
      that.imgList[state.aimDom.attrs.class] = {
        src: newValue.value.src,
        blob: newValue.value.blob,
      };
    } else if (newValue.type == "delete") {
      that.$delete(state.aimDom.children, newValue.index);
      that.$delete(state.aimAttrs.carousel.imgList, newValue.index);
    } else if (newValue.type == "add") {
      let img = {
        tagName: "el-carousel-item",
        attrs: {
          class: "el-carousel__item  is-animating carouselItem1",
          "data-type": "carouselItem",
        },
        children: [
          {
            attrs: {
              src: newValue.value.blob,
              "data-type": "carouselItemImage",
            },
            style: { width: "100%", height: "100%" },
            tagName: "img",
          },
        ],
      };
      that.$set(state.aimDom.children, state.aimDom.children.length, img);
      that.$set(
        state.aimAttrs.carousel.imgList,
        state.aimAttrs.carousel.imgList.length,
        newValue.value.blob
      );
      that.imgList[state.aimDom.attrs.class] = {
        src: newValue.value.src,
        blob: newValue.value.blob,
      };
    }
    state.aimAttrs.carousel[newValue.type] = newValue.value;
  } else if (attrsName == "imageUrl") {
    state.aimDom.attrs.src = newValue.blob;
    that.imgList[state.aimDom.attrs.class] = {
      src: newValue.src,
      blob: newValue.blob,
    };
  }

  state.domStackNum += 1;
  state.domStack.splice(state.domStackNum);
  state.domStack.push({
    type: "attrsChange",
    pageName: that.pageName,
    path: state.aimPath,
    data: [oldDom, JSON.parse(JSON.stringify(state.aimDom))],
  });
}
